@import '../../css/common.styl';

ui-list 
 width 100%

.item-title
  width 90vw;
  height: 80vh
  margin 0 auto
  margin-top 10px
  box-shadow: 15px 15px 10px -8px #888;
  border 1px solid #eee
  justify-content: flex-start
  align-items: flex-start
  padding: 10px
  overflow auto
  &:active
    transform scale(1, 1)

.list-normal
  width 100%
  border-bottom 1px solid #ddd
  >.item
    width 100%
    height 40px
    display flex
    align-items: center
    border 1px solid #ddd
    border-bottom none
    box-sizing border-box
    padding 10px
    &:nth-child(odd)
      background-color #eee
    .htitle
      font-size 14px

.list-arrow
  @extends .list-normal
  >.item
    justify-content: space-between
    &:after
      content: '›'
      font-size 20px
      color #999

.list-selected
  @extends .list-normal
  >.item
    justify-content: space-between
    &.selected
      background-color blue
      color #fff
      &:nth-child(odd)
        background-color blue
        color #fff
    &:after
      content: '›'
      font-size 20px
      color #999

.list-collapse
  @extends .list-normal
  >.item
    transition all .3s
    justify-content: space-between
    padding: 0
    margin 0
    padding: 0 10px
    .htitle
      display block
    .hbody
      padding: 10px
      margin-left -10px
      width 100%
      height auto
      background-color #ccc
      display none
    &:after
      content: '›'
      font-size 20px
      color #999
    &.selected
      background-color blue
      color #fff
      flex-direction column
      align-items: flex-start
      height 120px
      &:nth-child(odd)
        background-color blue
      .htitle
        padding: 10px 0
      .hbody
        height 100px
        display block
      &:after
        display none

.list-appstore
  @extends .list-normal
  display flex
  flex-direction column
  align-items: center
  >.item
    width 96%
    height 200px
    overflow hidden
    border-radius 10px
    border-bottom 1px solid #ddd
    margin-bottom 20px
    align-items: flex-start
    flex-direction column
    ui-markit .hlist
      .item
        .htitle
          border none
          line-height 20px
    .htitle
      display block
      font-size 20px
      line-height 50px
      width 100%
      height 50px
      border-bottom 1px solid #ccc
    .hdot-item
      margin-top 10px
      width 100%
      color #666

.list-scroll
  // display flex
  white-space:nowrap;
  height 200px
  .item
    display inline-block
    // flex-shrink: 0
    // flex-grow: 0
    overflow hidden
    height 120px
    margin-top 10px
    margin-left 10px
    width 100px
    image
      width 100px

.list-swiper
  height 200px
  .item
    display inline-block
    overflow hidden
    margin-top 10px
    margin-left 10px